<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{background-color:#F0F0F0;}
			.tiji{position: absolute;
			border: 1px solid;padding:10px ;}
				.name1{width: 200px;
				        height: 100px;
				        background-color: white;
				        border-radius: 200px 200px 0px 0px;
				        position: relative;
				        box-shadow: 0px 0px 10px #EDDE74;}
			    .name2{width: 200px;
				        height: 100px;
				        background-color: black;
				        border-radius: 0px 0px 200px 200px;
				        position: relative;
				         box-shadow: 0px 0px 10px #EDDE74;}
				     .n1{width: 100px;
				            height: 100px;
				            border-radius: 50%;
				            background-color:black;
				            position: absolute;
				            top: 50px;
				            z-index:10;}
				    .n2{width: 100px;
				            height: 100px;
				            border-radius: 50%;
				            background-color:white;
				            position: absolute;
				            top: -50px;
				            right: 0px;}
				       .a1{width: 25px;
				            height: 25px;
				            border-radius: 50%;
				            background-color:white;
				            position: absolute;
				            top: 25px;
				            right:38px;
				           }
				        .a2{width: 25px;
				            height: 25px;
				            border-radius: 50%;
				            background-color:black;
				            position: absolute;
				            top: 50px;
				            right:38px;}
		</style>
	</head>

	<body>
		<div class="tiji">
		<div class="name1">
			<div class="n1">
				<div class="a1"></div>
			</div>
		</div>
		<div class="name2">
			<div class="n2">
				<div class="a2"></div>
			</div>
		</div>
		</div>
	</body>

</html>